<template>
  <div class="components-attr-edit components-attr-animate-edit">
    <el-scrollbar class="components-attr-edit">
      <div class="attr-edit-inner" v-if="currElementUUID">
        <div class="animate-edit-btn-wrapper">
          <el-button type="primary" icon="el-icon-plus" size="small" @click="addAnimate">添加动画</el-button>
          <el-button icon="el-icon-caret-right" size="small" @click="runAnimate(undefined)">预览动画</el-button>
        </div>
        <div class="el-animate-list-wrapper" v-show="currElement.animations.length">
          <el-collapse accordion>
            <div v-for="(item, index) in currElement.animations" :key="index">
              <el-collapse-item v-if="item">
                <template slot="title">
                  <span class="el-animate-title-name">{{index===0?'入场':index==1?'增强':'出场'}}</span>
                  <div class="el-animate-title-type-wrapper">
                    <span class="el-animate-title-type" @click="handleShowChooseAnimatePanel(index)">{{item.type}}  <i
                            class="el-icon-caret-right size-mini"></i> </span>
                  </div>
                  <span class="el-animate-title-btn" @click.stop.prevent="runAnimate(index)"><i
                          class="el-icon-caret-right"></i></span>
                  <span class="el-animate-title-btn" @click.stop.prevent="handleDeleteAnimate(item)"><i
                          class="el-icon-delete"></i></span>
                </template>
                <div class="el-animate-item">
                  <div class="attr-item-edit-wrapper">
                    <p class="attr-item-title">动画时长：</p>
                    <div class="col-2 attr-item-edit-input">
                      <el-input-number size="mini" :value="item.duration" @change="handleValueChange({duration: $event}, index)" controls-position="right" :min="0" :step="1"/>
                    </div>
                  </div>
                  <div class="attr-item-edit-wrapper">
                    <p class="attr-item-title">动画延迟：</p>
                    <div class="col-2  attr-item-edit-input">
                      <el-input-number size="mini" :value="item.delay" @change="handleValueChange({delay: $event}, index)"  controls-position="right" :min="0" :step="1"/>
                    </div>
                  </div>
                  <div class="attr-item-edit-wrapper">
                    <p class="attr-item-title">循环次数：</p>
                    <div class="col-2 attr-item-edit-input">
                      <el-input-number size="mini" :value="item.interationCount" @change="handleValueChange({interationCount: $event}, index)" controls-position="right"/>
                      <div class="attr-item-edit-input-des">次数</div>
                    </div>
                    <div class="col-2 attr-item-edit-input">
                      <el-checkbox :value="item.infinite"  @change="handleValueChange({infinite: $event}, index)" label="infinite" border size="small">循环播放</el-checkbox>
                    </div>
                  </div>
                </div>
              </el-collapse-item>
            </div>

          </el-collapse>
        </div>
      </div>
      <div v-else>
        <p class="gray paddingT30 text-center">请在画板上选择需要编辑得元素</p>
      </div>
    </el-scrollbar>

    <div class="components-attr-edit animate-choose-list-wrapper"
         :class="{fadeInUp: showAnimatePanel, fadeInDown: !showAnimatePanel, animate: showAnimatePanel}">
      <el-tabs v-model="activeName">
        <el-tab-pane v-for="(item,idx) in animateCssDatas" :key="item.label" :label="item.label" :name="item.label">
          <el-scrollbar class="animate-choose-item">
            <div
              class="animate-choose-item-inner"
              v-for="(animate, index) in item.children"
              :key="index"
              @mouseover="hoverPreviewAnimate = animate.value"
              @mouseleave="hoverPreviewAnimate = ''"
              @click="handleChooseAnimate(animate, idx)">
              <span class="animate-choose-image"
                :style="{backgroundPosition: `${item.bg_X}px ${item.bg_Y}px`}"
                :class="[hoverPreviewAnimate === animate.value && animate.value + ' animated']"></span>
              <p>{{animate.label}}</p>
            </div>
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import animateCssDatas, { animateOption } from '@/assets/animate-data'
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
  name: 'setting-animate',
  data() {
    return {
      animateCssDatas,
      activeName: '进入',
      showAnimatePanel: false,
      reSelectAnimateIndex: undefined,
      hoverPreviewAnimate: ''
    }
  },
  computed: {
    ...mapState('programs', ['currElementUUID', 'currSceneUUID', 'pageData']),
    ...mapGetters('programs', ['currSceneIndex', 'currElementIndex', 'currElement'])
  },
  watch: {
  },
  methods: {
    ...mapMutations('programs', [ 'updateElementAnimate', 'deleteElementAnimate' ]),
    /**
     * 选取animate
     * @param item
    */
    handleChooseAnimate(item) {
      this.showAnimatePanel = false
      if (this.reSelectAnimateIndex === undefined) {
        // 添加
        this.updateElementAnimate({
          typeId: item.typeId,
          value: {
            ...animateOption,
            type: item.value,
            typeId: item.typeId
          }
        })
      } else {
        // 修改
        this.updateElementAnimate({
          typeId: this.reSelectAnimateIndex,
          value: {
            type: item.value,
            typeId: item.typeId
          }
        })
      }
    },
    handleValueChange(data, idx) {
      this.updateElementAnimate({
        typeId: idx,
        value: data
      })
    },
    /**
     * 删除动画
     * @param index
     */
    handleDeleteAnimate(index) {
      this.deleteElementAnimate(index)
    },
    handleShowChooseAnimatePanel(index) {
      this.reSelectAnimateIndex = index
      this.showAnimatePanel = true
    },
    addAnimate(showAnimatePanel = true) {
      this.showAnimatePanel = showAnimatePanel
      this.reSelectAnimateIndex = undefined
    },
    /**
     * 执行此条动画效果
     */
    runAnimate(index) {
      let animationData = index === undefined ? this.currElement.animations : [this.currElement.animations[index]]
      this.$EventBus.$emit('RUN_ANIMATIONS', this.currElement.uuid, animationData)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../../assets/scss/variables';
.components-attr-edit {
  height: 100%;
}
.components-attr-animate-edit {
  position: relative;
}
.attr-title {
  font-weight: bold;
}
.attr-item-edit-wrapper {
  padding-left: 4px;
  display: flex;
  width: 100%;
  text-align: center;
  padding-bottom: 10px;
  .attr-item-title {
    text-align: left;
    min-width: 60px;
    font-size: 12px;
    line-height: 28px;
  }
  .attr-item-edit-input {
    &.col-2 {
      width: 90px;
      margin-left: 10px;
    }
    &.col-1 {
      width: 250px;
    }
    &.col-3 {
      width: 60px;
      //margin-left: 10px;
    }
    &.col-4 {
      width: 50px;
      margin-left: 10px;
    }
    .attr-item-edit-input-des {
      text-align: center;
      line-height: 1;
      margin-top: 2px;
      font-size: 12px;
      color: $gray;
    }
  }
}
.animate-choose-list-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  width: 380px;
  height: calc(100% - 48px);
  background: white;
  z-index: 100;
  transition: all 0.28s;
  &.fadeInUp {
    top: 50px;
    opacity: 1;
  }
  &.fadeInDown {
    opacity: 0;
    top: 110%;
  }
}
.animate-choose-item {
  height: 100%;
  .animate-choose-item-inner {
    display: inline-block;
    width: 25%;
    height: 72px;
    color: rgb(118, 131, 143);
    text-align: center;
    cursor: pointer;
    & > .animate-choose-image {
      display: inline-block;
      width: 40px;
      height: 40px;
      margin-bottom: 6px;
      background-image: url(./img/use-beb469.png)
    }
    p {
      font-size: 12px;
      line-height: 1;
    }
  }
}
.el-animate-list-wrapper {
  display: flex;
  flex-direction: row;
  .el-animate-title-name {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    font-weight: bold;
    max-width: 45px;
    margin-left: 10px;
  }
  .el-animate-title-type-wrapper {
    display: inline-block;
    width: 104px;
  }
  .el-animate-title-type {
    display: inline-block;
    vertical-align: middle;
    width: 104px;
    height: 24px;
    line-height: 1px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #fafafa;
    border-radius: 60px;
    padding: 4px 16px;
    border: none;
    cursor: pointer;
    margin: 0 20px 0 10px;
    &:hover {
      color: white;
      background: $primary;
    }
  }
  .el-animate-title-btn {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    line-height: 24px;
    font-size: 14px;
    color: #666;
    width: 24px;
    height: 24px;
    cursor: pointer;
    border-radius: 4px;
    background: rgba(37, 165, 137, 0.08);
    margin-left: 6px;
    &:hover {
      color: white;
      background: $primary;
    }
  }
  .el-animate-item {
    margin: 0 10px;
  }
  .el-collapse {
    width: 100% !important;
  }
}
</style>
<style lang="scss">
.components-attr-edit {
  .el-tabs {
    height: 100%;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
  }
}
</style>